<template>
  <a-modal :open="open" width="1200px" title="收发存明细" centered :footer="false" @cancel="onCancel">
    <SearchContainer @search="getData" @reset="onRset()">
      <a-form :model="formState" name="validate_other" class="flex">
        <a-form-item name="ckid" label="操作仓库" class="w-[380px]">
          <SelectWarehouse v-model:value="formState.ckid" multiple :max-tag-count="2" />
        </a-form-item>
        <a-form-item label="核算月度:" class="w-[280px]">
          <div>{{ rowData.month || '-' }}</div>
        </a-form-item>
      </a-form>
    </SearchContainer>
    <BaseTable :loading="loading" column-code="000085" :height="400" :data-source="tableData" :pagination="pagination" :scroll="{ x: 1600 }" bordered>
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.dataIndex === 'xh'">
          <div>{{ index + 1 }}</div>
        </template>
        <template v-if="column.dataIndex === 'ypmc'">
          <MedicineInfo :value="{ mc: record.ypmc, gg: record.gg, cj: record.cj }" />
        </template>
      </template>
    </BaseTable>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'
import SelectWarehouse from '@/components/SelectWarehouse'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: Boolean,
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const formState = ref({})

const { loading, tableData, getData, pagination } = useTable({
  url: '/drugStorage/comprehenive/getDrugMonthBillDetailList',
  params: formState.value
})

const onRset = () => {
  formState.value.ckid = []
  getData()
}

const onCancel = () => {
  emit('update:open', false)
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      formState.value.ypbh = props.rowData.sfxmbBh
      formState.value.month = props.rowData.month
      getData()
    }
  }
)
</script>
